<div class="tw:flex tw:flex-col tw:gap-2">
    <div>
        {% trans '支持的文件格式: PDF, DOC, DOCX, PNG, JPEG 以及 ZIP 压缩包' %} <br />
        {% trans '注意压缩包内部文件必须满足上述文件格式（且不含压缩包）' %}<br />
        {% trans '文件名格式: “姓名”。如果多个人为同一姓名，则在姓名后用“+”连接区分字符。如果一个人有多个简历，则在最后可以加“-”符号分割。' %} <br />
        {% trans '按照此规则，文件名可以使用 "姓名-格外信息" 格式来携带格外信息'  %} <br />
        {% trans '使用上述文件名规则可以使程序自动检测出姓名，进行姓名自动填写' %} <br />
        {% trans '样例:' %} <br />
        {% trans '“张三-2023” “张三-2024”' %} <br />
        {% trans '张三的两个简历: “张三”, “张三-1”' %} <br />
        {% trans '两名研究员都叫李四: “李四”, “李四+1”, “李四+1-第二份简历”' %} <br />
        {% trans '默认密码: by6pms' %}
    </div>
    <div id="upload-resumes-area">
        {% comment %}
            NOTE don't add data-file-uploader property since it will activate file uploader
            setup handler inside HTMX handler in base.ts
        {% endcomment %}
        <input></input>
    </div>
    
    <!-- error display area -->
    <div id="upload-resumes-errors-area" class="tw:card tw:px-4 tw:py-2 tw:bg-red-200 tw:hidden">
        <ul id="upload-resumes-errors" class="tw:list">
        </ul>
    </div>
    
    <!-- additional information area -->
    <div>
        <div class="overflow-x-auto" id="resumes-assignment-table-area"></div>
    </div>

    <div class="tw:flex tw:flex-col">
        <!-- error message -->
        <div id="action-error-message" class="tw:text-error tw:text-right tw:hidden"></div>
        <!-- action area -->
        <div class="tw:flex tw:flex-row-reverse tw:gap-2">
            <button class="tw:btn tw:btn-soft tw:btn-primary" id="resumes-batch-uploader-submit-btn">{% trans '提交' %}</button>
            <button class="tw:btn tw:btn-soft" id="resumes-batch-uploader-cancel-btn">{% trans '取消' %}</button>
        </div>
    </div>
</div>
